<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>团购分类</title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<link rel="stylesheet" href="./css/menber.css">
		<style type="text/css">
			.layui-table-cell {
				height: 50px;
				line-height: 50px;
			}
			
			.layui-table-page {
				background: white;
			}
			
			#uniocn {
				box-sizing: border-box;
				padding: 15px 100px;
			}
			
			.alear_a {
				display: none;
				box-sizing: border-box;
				padding: 20px;
			}
			
			.alear_a01 {
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 10px;
			}
			
			.alear_a01_l {
				width: 118px;
			}
			
			.alear_a01_r {
				width: 400px;
			}
			
			.alear_a01_r input {
				display: block;
				width: 100%;
				box-sizing: border-box;
				padding: 10px;
				border-radius: 2px;
				border: 1px solid #ddd;
			}
		</style>
	</head>

	<body>
		<div id="uniocn" class="layui-layout layui-layout-admin">
			<div class="finance-title" style="background: #fff;padding-bottom: 0;border-bottom: 1px solid #1AB394">
				<button class="layui-btn layui-btn-ms">分类管理</button>
			</div>
			<div class="manageb" style="width:100%;display:flex;justify-content:space-between;box-sizing: border-box;padding: 0 20px;">
				<form class="layui-form">
					<div>
						<div class="layui-input-inline" style="width: 400px;">
							<input type="text" name="keyword" placeholder="请输入搜索内容" class="layui-input" style="font-size: 14px;">
						</div>
						<div class="layui-input-inline">
							<button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">搜索</button>
						</div>
					</div>
				</form>
				<button id="addNew" style="background: #1E9FFF;" class="layui-btn"><i class="layui-icon">&#xe61f;</i> 新建分类</button>
			</div>

			<div class="table">
				<table class="layui-hide" id="demo" lay-filter="demo"></table>
				<script type="text/html" id="barDemo">
					<a class="layui-btn layui-bg-blue layui-btn-sm" lay-event="copy">复制链接</a>
					<a class="layui-btn layui-bg-orange layui-btn-sm" lay-event="edit">编辑</a>
					<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delect">删除</a>
				</script>
			</div>
		</div>

		<!--添加幻灯片-->
		<div class="alear_a">
			<form class="layui-form" action="">
				<div class="layui-form-item">
					<label class="layui-form-label">分类图片</label>
					<div class="layui-input-block">
						<div class="layui-upload">
							<button type="button" class="layui-btn" id="test1">上传图片</button>
							<div class="layui-upload-list">
								<img class="layui-upload-img" style="width: 120px;" id="demo1">
								<p id="demoText"></p>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">分类名称</label>
					<div class="layui-input-block">
						<input type="text" placeholder="请输入分类名称" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">分类排序</label>
					<div class="layui-input-block">
						<input type="text" placeholder="请输入分类排序" class="layui-input">
					</div>
				</div>
			</form>
		</div>
	</body>
	<script src="layui/layui.js"></script>
	<script src="js/jquery-3.2.1.min.js"></script>
	<script>

		layui.use(['layer', 'table', 'form', 'upload'], function() {
			layer = layui.layer,
				table = layui.table,
				form = layui.form,
				upload = layui.upload;

			//搜索
			form.on('submit(formDemo)', function(data) {
				console.log(JSON.stringify(data.field));
				return false;
			});

			//添加分类
			$('#addNew').click(function() {
				layer.open({
					title: '添加分类',
					type: 1,
					area: '600px',
					content: $('.alear_a'),
					btn: ['提交', '取消'],
					btnAlign: 'c',
					yes: function(index, layero) {
						layer.msg('提交成功', {
							time: 2000,
						});
						layer.close(index);
					}
				});
			})

			//普通图片上传
			var uploadInst = upload.render({
				elem: '#test1',
				url: '',
				before: function(obj) {
					//预读本地文件示例，不支持ie8
					obj.preview(function(index, file, result) {
						$('#demo1').attr('src', result); //图片链接（base64）
					});
				},

				done: function(res) {
					//如果上传失败
					if(res.code > 0) {
						return layer.msg('上传失败');
					}
					//上传成功
				},

				error: function() {
					//演示失败状态，并实现重传
					var demoText = $('#demoText');
					demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
					demoText.find('.demo-reload').on('click', function() {
						uploadInst.upload();
					});
				}
			})

			table.render({
				elem: '#demo',
				cols: [
					[ //标题栏
						{
							field: 'ID',
							title: 'ID',
							align: 'center',
						},
						{
							field: 'picture',
							title: '图片',
							align: 'center',
						},
						{
							field: 'classificate',
							title: '分类名称',
							align: 'center',
							edit: 'text'
						}, {
							field: 'sort',
							title: '排序',
							align: 'center',
						}, {
							fixed: 'right',
							title: '操作',
							align: 'center',
							width: 400,
							toolbar: '#barDemo'
						}
					]
				],
				data: [{
					"ID": 1,
					"picture": "<img style='width: 40px;height: 40px;' src='images/bg.png'/>",
					"classificate": "测试",
					"sort": 1,

				}],
				page: true //是否显示分页
				//,limit: 5 //每页默认显示的数量
			});

			//监听工具条
			table.on('tool(demo)', function(obj) {
				var data = obj.data;
				if(obj.event === 'copy') { //复制链接
					layer.msg('复制成功', {
						icon: 1,
						time: 1000
					}, function() {
						//do something
					});
				} else if(obj.event === 'edit') { //编辑
					layer.open({
						title: '编辑分类',
						type: 1,
						area: '600px',
						content: $('.alear_a'),
						btn: ['提交', '取消'],
						btnAlign: 'c',
						yes: function(index, layero) {
							layer.msg('提交成功', {
								time: 2000,
							});
							layer.close(index);
						}
					});
				} else if(obj.event === 'delect') { //删除
					layer.confirm('确认删除吗？', function(index) {
						obj.del();
						layer.close(index);
					});
				}
			})
		});
	</script>

</html>